<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="text/html"/>
    <meta charset="utf-8">
    <title></title>
    <link href="../static/css/css.css" rel="stylesheet" type="text/css"/>
    <script src="../static/js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../static/js/highcharts.js"></script>
    <script type="text/javascript" src="../static/js/modules/exporting.js"></script>
    <script src="../static/js/jquery-ui.js"></script>
    <script type="text/javascript">
        function query() {
            var wid = $('#keyword').val();
            $.ajax(
                    {
                        url: '/report/' + wid,
                        type: 'GET',
                        dataType: 'json',
                        success: function (data) {
                            printData(data);
                        },
                        error: function (data) {
                            alert('未找到该员工');
                        }
                    });
        }
        function timeToSeconds(time) {
            time = time.split(/:/);
            return time[0] * 3600 + time[1] * 60 + time[2];
        }
        function printData(data) {
            $('#overtime').text(data.ot.ot);
            $('#user_name').text(data.ot.emp_name);
            var my_arr = new Array();
            my_arr[0] = data.events.late;
            my_arr[1] = data.events.early_exit;
            my_arr[2] = data.events.no_clock_in_am + data.events.no_clock_in_pm;
            my_arr[3] = data.events.ot;
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: '次数'
                    }

                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y}'
                        }
                    }
                },

                tooltip: {
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> <br/>'
                },

                series: [{
                    name: '',
                    colorByPoint: true,
                    data: [{
                        name: '迟到',
                        y: my_arr[0],
                    }, {
                        name: '早退',
                        y: my_arr[1],
                    }, {
                        name: '未打卡',
                        y: my_arr[2],
                    }, {
                        name: '加班',
                        y: my_arr[3],
                    }]
                }]
            });
            var list = data.detail;
            <!--var time1 = timeToSeconds('09:00:00');-->
            <!--var time2 = timeToSeconds('12:00:00');-->
            <!--var time3 = timeToSeconds('18:00:00');-->
            $('#detail_table').html('<tr class="table_title" id="first_td"><td id="first_row">日期</td><td>上班打卡</td><td>下班打卡</td><td>迟到</td><td>早退</td><td>上班未打卡</td><td>下班未打卡</td><td>加班</td></tr>');
            $.each(list, function (n, value) {
                $('#detail_table').append('<tr><td>' + value.date + '</td><td>'+value.first+'</td><td>'+value.second+'</td> <td>' + ((value.late!=null) ? true : '') + '</td> <td>' + ((value.earlyout!=null) ? true : '') + '</td> <td>' + ((value.mismor == null) ? '' : true) + '</td> <td>' + ((value.misnoon == null) ? '' : true) + '</td> <td>' + value.ot + '</td> </tr>');
            })
        }
        $(function () {
            //模糊搜索匹配 开始
            $("#keyword").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "../employees/" + request.term, //根据名称查询
                        dataType: "json",
                        success: function (data) {
                            response($.map(data.ems, function (item) {
                                        return {
                                            label: item.wid//显示工号
                                        }
                                    })
                            )
                            ;
                        }
                    });
                },
            });
            //模糊搜索匹配 结束
        });
    </script>
    <style>
        #first_row{width:200px}
    </style>
</head>

<body>

<div class="top">
    <div class="logo">
        <img src="../static/img/logo.png" width="371" height="43"/>
    </div>
</div>


<div class="main">
    <div class="nav">
        <a href="/file/"><img src="../static/img/02.png" width="130" height="35"/></a>
        <a href="/report/"><img src="../static/img/06.png" width="130" height="35"/></a>
        <a href="/config/"><img src="../static/img/04.png" width="130" height="35"/></a>
    </div>
    <div class="inquiry">
        <div class="inq">
            <input  name="" type="text" class="text" id="keyword" placeholder="输入员工工号(例:SR000111)..."/>
            <input name="" type="button" value="查询" class="butt" onclick="query()"/>
        </div>
        <div class="clear"></div>
        <span class="title">员工：<span id="user_name"></span>  个人考勤情况</span>

        <div class="time">
            <span>加班时长(小时)</span>
            <span class="timess" id="overtime"></span>
        </div>
        <div class="account">
            <div id="container"
                 style="position:relative;top:10px;min-width: 110px; max-width: 500px; height: 95%; margin: 0 auto;bottom:0px;"></div>
        </div>
        <div class="clear"></div>
        <div class="table">
            <table width="100%" border="0" id="detail_table">
                <tr class="table_title" id="first_td">
                    <td id="first_row">日期</td>
                    <td>上班打卡</td>
                    <td>下班打卡</td>
                    <td>迟到</td>
                    <td>早退</td>
                    <td>上班未打卡</td>
                    <td>下班未打卡</td>
                    <td>加班</td>
                </tr>
            </table>

        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="foot">
    <div class="foot_main">
        <span>Copyright © 2014 SR All Rights Reserved 湘ICP备14013985号-1</span><span>湖南上容信息技术有限公司  </span>
    </div>
</div>
</body>
</html>